<template>
  <el-dialog :visible.sync="isLogisticsList" title="物流信息">
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in logisticsList"
        :key="index"
        :timestamp="activity.time"
        color="#0bbd87"
        size="large"
        type="primary">
        {{ activity.context }}
      </el-timeline-item>
    </el-timeline>
  </el-dialog>

</template>

<script>
import { createNamespacedHelpers } from 'vuex'

const {
  mapState,
  mapMutations
} = createNamespacedHelpers('orders')
export default {
  name: 'OrdersSteps',
  data () {
    return {
      isLogisticsList: false,
      activities: [{
        content: '支持使用图标',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '支持自定义颜色',
        timestamp: '2018-04-03 20:46',
        color: '#0bbd87'
      }, {
        content: '支持自定义尺寸',
        timestamp: '2018-04-03 20:46',
        size: 'large'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-03 20:46'
      }]
    }
  },
  methods: {
    ...mapMutations(['setOrdersStepsVisible'])
  },
  computed: {
    ...mapState(['ordersStepsVisible', 'logisticsList'])
  },
  watch: {
    ordersStepsVisible (value) {
      this.isLogisticsList = value
    },
    isLogisticsList (value) {
      this.setOrdersStepsVisible(value)
    }
  }
}
</script>

<style scoped>

</style>
